
<template>
	<div>
		<van-popup v-model="showSelect" position="bottom" :close-on-click-overlay="false" round
			@click-overlay="onCloseInvoiceSelect" class="invoice-select">
			<div class="svip-select-inner">
				<div class="close-input">
					<i class="iconfont icon-icon_close" @click="onCloseInvoiceSelect"></i>
				</div>
				<div class="svip-select-title">超级会员</div>
				<div class="svip-select-content">
					<div class="select-list" v-for="(item, index) in options" :key="index">
						<div class="list-text">{{ item.label }}</div>
						<div class="list-item" @click="changeChose(item, index)">{{ item.text }} <span
								v-show="index === 0">¥{{ cutPrice }}</span>
							&nbsp;<img :src="curIndex === index ? imgSrc[0] : imgSrc[1]" /></div>
					</div>
				</div>
			</div>

		</van-popup>
	</div>
</template>
<script>

export default {
	props: {
		//是否显示发票选择器
		showSelect: {
			type: Boolean,
			default: false,
		},
		cutPrice: {
			default: 0,
		},
		options: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			show: true, //是否显示发票选择组件
			curIndex: 0,
			imgSrc: [
				require("../../assets/checked.png"),
				require("../../assets/uncheckd.png")
			],
		};
	},
	methods: {
		onCloseInvoiceSelect() {
			this.$emit("closeSelect");
		},
		changeChose(item, index) {
			this.curIndex = index
			this.$emit("closeSelect");
			this.$emit("select", item.value);
		}
	},
};
</script>
<style lang="scss" scoped>
.invoice-select {
	height: 3.50rem;
	overflow-y: hidden;
	max-width: 480px;
	right: auto;

	.svip-select-inner {
		height: 100%;
		display: flex;
		flex-direction: column;

		.close-input {
			position: absolute;
			top: 0.24rem;
			right: 0.32rem;
			color: #999999;
			font-size: .32rem;

			.icon-icon_close {
				font-size: 0.24rem;
			}
		}

		.svip-select-title {
			text-align: center;
			padding: 0.24rem;
			font-size: .32rem;
			color: #333333;
		}

		.svip-select-content {
			padding: 0 0.32rem;
			font-size: .28rem;
			color: #333333;
		}

		.select-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 0.96rem;
			line-height: 0.96rem;

			img {
				vertical-align: middle;
				width: 0.32rem;
				height: 0.32rem;
			}
		}

	}
}
</style>
